<template>
  <div>
    <el-dialog 
      :top="top"
      :width="width" 
      :visible.sync="modelValue" 
      :close-on-click-modal="wrapperClosable" 
      :show-close="showClose"
      :title="title" 
      :destroy-on-close="true" 
      :modal="false" 
      :fullscreen="fullscreen"
      class="custom-dialog"
      @close="handleClose"
    >
      <div class="dialog-box">
        <div class="el-dialog-body">
          <slot></slot>
        </div>
        <div class="el-dialog-footer" v-if="slotFooter">
          <slot name="footer"></slot>
        </div>
      </div>
    </el-dialog>
    <!-- 自定义遮罩层 -->
    <div v-if="modelValue" class="custom-modal" @click="wrapperClosable && handleClose()"></div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, watch,defineEmits } from '@vue/composition-api'

const emit = defineEmits(['close'])

const props = defineProps({
  // 弹窗宽度
  width: {
    type: String,
    default: '50%'
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true
  },
  // 标题
  title: {
    type: String,
    default: '标题'
  },
  // 点击遮罩层是否可以关闭 Dialog
  wrapperClosable: {
    type: Boolean,
    default: false
  },
  // 是否显示自定义底部
  slotFooter: {
    type: Boolean,
    default: false
  },
  // 是否全屏
  fullscreen: {
    type: Boolean,
    default: false
    },
  // 弹窗顶部距离
  top: {
    type: String,
    default: '15vh'
  }
})

const modelValue = ref(false)

// 监听弹窗关闭
const handleClose = () => {
  // 强制重新渲染插槽内容
  emit('closeFun')
  setTimeout(() => {
    close()
  }, 30)
}

const open = () => {
  modelValue.value = true
}

const close = () => {
  // const modal = document.querySelector('.v-modal');
	// 			if (modal) {
	// 				modal.remove();
	// 			}
  modelValue.value = false
}

defineExpose({
  open,
  close
})
</script>

<style lang="scss" scoped>
.custom-dialog {
  ::v-deep .el-dialog {
    border-radius: 6px !important;
    position: relative;
    z-index: 2003;
  }

  .dialog-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  ::v-deep .el-dialog__header {
    margin-bottom: 0px !important;
    padding: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: "PingFang SC" !important;
    color: #333 !important;
    font-size: 14px !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  ::v-deep .el-dialog__body {
    padding: 0px !important;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }

  ::v-deep .el-dialog__headerbtn {
    top: 14px !important;
    right: 14px !important;
  }

  .el-dialog-body {
    flex: 1;
    overflow: auto;
    padding: 10px 14px;
  }


  .el-dialog-header {
    flex-shrink: 0;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
  }

  .el-dialog-footer {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid #e5e5e5;
  }
}

.custom-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}
</style>
